<template>
	<view class="page">
			<!-- <scroll-view scroll-x style="width: 100vw;" >
				<view class="typeArr">
					<view class="typeArrItem"  v-for="(item,index) in typeArr" :key="index" @click="changeType(item.id)">
						<view :class="activeTypeId==item.id ? 'activeText ' : '' ">
							{{item.name}}
						</view>
					</view>
				</view>
			</scroll-view> -->
			
				<scroll-view style="height: 90vh;"  scroll-y @scrolltolower="scrolltolower" > 
					<view class="goodsArr">
						<view class="goodsArrItem" v-for="(item,index) in goodsList" :key="index" @click="junit('/pages/tabShop/goodsDetail/goodsDetail' , {id: item.goodid})">
							<image :src="item.thumb" mode="aspectFit"></image>
							<view class="info">
								{{item.title}}
							</view>
							<text>￥{{item.price}}</text>
						</view> 
					</view>
					<noMore v-if="goodsList.length==0"></noMore>
				</scroll-view>
			
	</view>
</template>

<script>
import noMore from '@/components/noMore/noMore.vue'	
	export default {
		data() {
			return {
				activeTypeId: '',
				params:{
					keyword:'',
					page: 1,
				},
				typeArr:[
					{name:'全部',id:'0',}
				],
				goodsList:[],
				type:1 , //type 二级分类  2分类商品
			};
		},
		methods:{
			goGoodList(_id){
				this.activeTypeId = _id
				this.goodsList = []
				this.getGoodArr()
			},
			changeType(_id){
				if(_id == this.activeTypeId){
					return
				}
				this.params.page = 1
				this.activeTypeId = _id
				this.getGoodArr()
			},
			getShopType(){
				this.myHttp({
					data:{
						uuid: 0 ,
						mid : uni.getStorageSync('userInfo').uid,
						type : 5,
						shop_id: '',
						scope : '',
						route : 'goods.category.get-children-category',
						parent_id : this.activeTypeId,
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.goodsList = this.goodsList.concat( res.data.data)
					}
				})
			},
			getGoodArr(){
				this.myHttp({
					url:'/addons/yun_shop/api.php',
					data:{
						type: 7,
						route : 'home-page.goodsList',
						page : this.params.page,
						keyword : '',
						cate_id : this.activeTypeId,
						as_id : '',
					}
				}).then((res)=>{
					if(res.result== '1'){
						this.goodsList = this.goodsList.concat( res.data)
					}
				})
			},
			scrolltolower(){
				console.log('触底了');
				// this.params.page++
				// this.getGoodArr()
			},
		},
		filters:{
		},
		components:{
			noMore
		},
		onLoad({id}) {
			this.activeTypeId = id
			// this.getShopType()
			this.getGoodArr()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
	.page{
		background-color: #F8F8F8;
		.typeArr{
			background-color: #fff;
			display: flex;
			width: 100%;
			height: 80rpx;
			padding: 20rpx;
			align-items: center;
			.typeArrItem{
				font-size: 28rpx;
				padding: 24rpx 10rpx;
				font-family: PingFang SC;
				color: #000000;
				display: flex;
				justify-content: center;
				background-color: #fff;
				white-space: nowrap;
				margin-right: 20rpx;
				position: relative;
			}
			.activeText{
				color: #FF5113;
				&:after{
					content: '';
					position: absolute;
					bottom: 10%;
					left: 50%;
					transform: translateX(-50%);
					width: 90%;
					height: 8rpx;
					background: #FF5113;
					border-radius: 4rpx;
				}
			}
		}
	
		.goodsArr{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				background-color: #F5F5F5;
				padding: 0rpx 25rpx 50rpx;
				margin-bottom: 100rpx;
				.goodsArrItem{
					width: 344rpx;
					height: 517rpx;
					background: #FFFFFF;
					border-radius: 10rpx;
					margin-top: 15rpx;
					image{
						height: 352rpx;
						width: 344rpx;
						border-radius: 10rpx 10rpx 0 0;
					}
					.info{
						font-size: 23rpx;
						color: #000;
						margin: 20rpx 10rpx;
						display: -webkit-box;    
						-webkit-box-orient: vertical;    
						-webkit-line-clamp: 2;    
						overflow: hidden;
					}
					text{
						color: #E9612B;
					}
				}
		}
	}

</style>
